<template>
	<view>
		<userinfo v-if="user_options.toLogin" id="user" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>
		<view class="container">
			<view class="background-color" :style="'background:' + mobile_head_color">
				<view class="topbox" v-if="listData.village_name">
					<view class="phone">{{listData.village_name + " （" + listData.floor_layer + listData.floor_name + "）"}}</view>
					<view class="address-box1">
						<view class="address-icon">
							<image src="../../../static/images/address.png" class="address-img"></image>
						</view>
						<view class="address-text">{{listData.village_address}}</view>
					</view>
				</view>
			</view>
			<!-- 居住社区 -->
			<scroll-view style="height:100%;
				margin-top: 10rpx;" scroll-y="true" :scroll-top="scrollTop" lower-threshold="10"
			 @scroll="scroll" @scrolltolower="scrollToBottom" :enable-back-to-top="true">
				<!-- 社区列表 -->
				<view v-if="!no_data">
					<view class="container-box" v-if="village_list !== undefined && village_list.length > 0">
						<!-- <view class="h1">社区列表</view> -->
						<view class="card" v-for="(item, index) in village_list" :key="index" @tap="goVillage(item.pigcms_id)" :data-village_id="item.village_id"
						 :data-village_name="item.village_name" :data-village_logo="item.village_logo">
							<view class="">{{item.room_info}}</view>
						</view>
					</view>
				</view>
				<view class="tip_box_no_data" v-if="no_data">
					<image class="no_data_img" src="../../../static/images/no_data.png"></image>
					<view class='no_tip_content'>暂无房间，请联系管理员上传</view>
				</view>
			</scroll-view>
			<!-- 弹层 -->
		</view>
	</view>
</template>

<script>
	import uniPopup from '../../../appComponent/uni/uni-popup/uni-popup.vue';
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	// 获取社区列表
	const getvillageList = () => {
		console.log('获取社区列表')
		var now_page = _this.pageIndex;
		if (_this.longitude == '' || _this.latitude == '') {
			console.log('获取社区列表111')
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					common.changeLocation('getLocation_msg', _this, res.longitude, res.latitude, 'gcj02');
				},
				fail: function(res) {
					console.log('定位失败：', res);
					village_info();
				}
			});
		} else {
			console.log('获取社区列表222')
			village_info();
		}
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
	};

	const village_info = () => {
		var keyword = _this.notedata;
		console.log("搜索输入的结果", keyword)
		common.post(
			'HouseApi&a=empty_village_room_list', {
				floor_id: _this.floor_id,
			},
			data => {
				if(data.vacancy_list[0]){
					_this.no_data = false
					_this.listData = data.find_info;
					_this.village_list = data.vacancy_list;
				}else{
					_this.listData = data.find_info;
					_this.village_list = data.vacancy_list;
					_this.no_data = true
				}
				
			}
		);
	};

	export default {
		data() {
			return {
				longitude: '',
				latitude: '',
				listData: {},
				village_list: [],
				listhouseData: {},
				user_options: {},
				villageid: '',
				villagename: '',
				villagelogo:'',
				scrollTop: '',
				scrollY: true,
				pageIndex: 1,
				pageLoading: false,
				pageLoadings: false,
				reachBottom: false,
				pageComplete: false,
				notedata: '',
				mobile_head_color: '#06c1ae',
				property_id: 0,
				referer_url: '',
				referer_type: '',
				village_address:'',
				floor_id:'',
				no_data:'',
			};
		},
		// 上拉加载
		onReachBottom() {
			var _this = this;
			if (_this.pageLoading) {
				console.log('获取小区列表1')
				getvillageList();
				_this.pageLoading = false
			}
		},
		onPullDownRefresh() {
			_this.pageIndex = 1
			console.log('获取小区列表2')
			getvillageList()
		},
		onLoad: function(options) {
			_this = this;
			_this.floor_id = options.floor_id;
			console.log('options', options);
			if (options && options.property_id) {
				_this.property_id = options.property_id;
			}
			if (options && options.referer_type) {
				_this.referer_type = options.referer_type;
			}
			common.setMainColor(_this, function(config) {
				_this.mobile_head_color = config.config.mobile_head_color;

				if (!app.globalData.is_login) {
					if (config.config.is_demo_domain) {
						uni.showModal({
							title: common.changeTxt('提示'),
							content: common.changeTxt('为了方便您测试 社区O2O 更多功能，建议您先进行登录。我们然后为您默认绑定一个测试小区。'),
							showCancel: true,
							cancelText: common.changeTxt('先看看'),
							confirmText: common.changeTxt('去登录'),
							success: function(res) {
								if (res.confirm) {
									_this.user_options = {
										toLogin: true
									};
								} else if (res.cancel) {
									console.log('++++++');
									console.log('获取小区列表3')
									getvillageList();
								}
							}
						});
					} else {
						console.log('获取小区列表4')
						getvillageList();
					}
				} else {
					console.log('======');
					console.log('获取小区列表5')
					getvillageList();
				}
			});

			common.getTxtKey('选择房间').then(
				key => {
					uni.setNavigationBarTitle({
						title: key
					});
				},
				() => {}
			);
		},
		mounted() {

		},
		methods: {
			openPopup() {
				this.$refs.popup.open();
			},
			closePopup() {
				this.$refs.popup.close();
			},
			getLocation_msg(res) {
				if (res && res.lng) {
					_this.longitude = res.lng;
				}
				if (res && res.lat) {
					_this.latitude = res.lat;
				}
				console.log('反馈信息：', res);
				village_info();
			},
			getUserInfo(e) {
				console.log('user.info 1111111111', e);
				//if (e.userInfo) {
				console.log('获取小区列表6')
				_this.user_options = {}
				getvillageList();
				//}
			},
			goVillageIndex(){
				if (common.checkIsFooterPage("/pages/village_menu/index")) {
					wx.switchTab({
						url: "/pages/village_menu/index"
					});
				} else {
					wx.redirectTo({
						url: '/pages/village_menu/index'
					})
				}
			},
			// 选择小区
			goVillage(pigcms_id) {
				_this = this;
				uni.navigateTo({
					url:'/pages/village/my/joinHouse?pigcms_id=' + pigcms_id
				})
			},
			//选择房间号
			goVillagehouse(e) {
				var pigcms_id = e.currentTarget.dataset.pigcms_id;
				var res = {
					village_id: _this.villageid,
					village_name: _this.villagename,
					village_logo: _this.villagelogo,
					pigcms_id: pigcms_id,
					property_id: _this.property_id
				};
				uni.setStorageSync('village_key', res);
				if (_this.referer_url) {
					var referer_url = _this.referer_url + '&village_id=' + _this.villageid + '&pigcms_id=' + pigcms_id;
					common.parseUrl(referer_url, '', false, '');
				} else {
					_this.goVillageIndex();
				}
			},
			search() {
				_this.pageIndex = 1
				console.log('获取小区列表7')
				getvillageList();
				_this.pageLoading = false;
				_this.pageLoadings = false;
			},
		},
		components: {
			uniPopup
		}
	};
</script>

<style>
	page {
		background: #ffffff;
	}

	.container {
		margin: 0;
		padding: 0;
		background: #ffffff;
	}
	.topbox {
		padding: 0 40rpx 20rpx;
		display: flex;
		flex-direction: column;
		background-size: 30%;
	}
	.info-box{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.name {
		font-size: 32rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
	}
	.tips {
		background-color: #ffa112;
		border-radius: 4rpx;
		font-size: 22rpx;
		font-weight: normal;
		font-stretch: normal;
		text-align: center;
		letter-spacing: 0px;
		color: #ffffff;
		padding: 2rpx 10rpx;
		margin-left: 15rpx;
	}
	.phone {
		font-size: 28rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0px;
		color: #ffffff;
	}
	.address-box1 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin-top: 10rpx;
	}
	.address-icon {
		width: 20rpx;
		height: 24rpx;
		flex-shrink: 0;
		margin-top: 9rpx;
	}
	.address-img {
		width: 100%;
		height: 100%;
		display: block;
	}
	.address-text {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 40rpx;
		letter-spacing: 0px;
		color: #ffffff;
		margin-left: 15rpx;
	}
	

	.card {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 690rpx;
		height: 100rpx;
		padding-left: 30rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 17rpx 1rpx rgba(216, 216, 216, 0.68);
		border-radius: 20rpx;
		margin: 14rpx auto;
	}

	.village-icon {
		width: 100rpx;
		height: 100rpx;
		flex-shrink: 0;
		margin: 0 30rpx;
		box-shadow: 0px 0px 16px 0px rgba(182, 182, 182, 0.38);
		padding: 12rpx;
		border-radius: 100%;
	}

	.village-img {
		width: 100%;
		height: 100%;
		border-radius: 135rpx;
	}

	.address-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.title-box,
	.distance-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.title {
		font-size: 36rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #202020;
	}

	.text {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 32rpx;
		letter-spacing: 0rpx;
		color: #333333;
		margin-top: 12rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.title1 {
		width: 140rpx;
		height: 46rpx;
		background-image: linear-gradient(90deg, #feb40d 0%, #ff6030 100%), linear-gradient(#cce198, #cce198);
		background-blend-mode: normal, normal;
		box-shadow: 0rpx 0rpx 8rpx 1rpx rgba(248, 88, 40, 0.35);
		font-size: 22rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 46rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
		text-align: center;
		border-radius: 25rpx 0 0 25rpx;
	}

	.text1 {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #666666;
		text-align: center;
		margin-right: 36rpx;
		display: flex;
		flex-shrink: 0;
	}

	/* 房间号弹层 */
	.popup-box {
		width: 610rpx;
		height: 720rpx;
		border-radius: 10px;
	}

	.popup-img {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 100rpx;
	}

	.popup-img1 {
		width: 300rpx;
		height: 300rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -150rpx;
	}

	.pigcmsIdView {
		font-size: 40rpx;
		font-weight: 600;
		color: #333;
	}

	.icon-img1 {
		width: 100%;
		height: 100%;
	}

	.popup-list {
		position: absolute;
		top: 185rpx;
		width: 540rpx;
		height: 560rpx;
		border-radius: 10px;
		overflow: hidden;
	}

	.popup-card {
		width: 439rpx;
		height: 77rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 77rpx;
		letter-spacing: 0rpx;
		color: #333333;
		border-radius: 5px;
		/*background: rgba(245, 245, 245, 1);*/
		margin: 10rpx auto;
	}

	.popup-btnl {
		position: absolute;
		bottom: -100rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 40rpx;
		border-radius: 58rpx;
		font-size: 26rpx;
		background-color: #ffffff;
		padding: 16rpx;
	}

	.popup-img2 {
		width: 100%;
		height: 100%;
	}

	.popup-btnr {
		position: absolute;
		bottom: 57rpx;
		right: 90rpx;
		font-size: 26rpx;
		width: 200rpx;
		height: 80rpx;
		background: rgba(6, 193, 174, 1);
		border-radius: 40rpx;
		color: #ffffff;
		line-height: 80rpx;
	}

	/* 提示窗口 */
	.uni-tip {
		padding: 15px;
		width: 300px;
		background: #fff;
		box-sizing: border-box;
		border-radius: 10px;
	}

	.uni-tip-title {
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}

	.uni-tip-content {
		padding: 15px;
		font-size: 14px;
		color: #666;
	}

	.uni-tip-group-button {
		margin-top: 10px;
		display: flex;
	}

	.uni-tip-button {
		width: 100%;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}

	.tip {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #666;
		padding: 10px 0;
		background: #f8f8f8;
	}

	.tip image {
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}

	.uni-popup__wrapper-box {
		border-radius: 20rpx;
		overflow-y:visible!important;
	}
	.tip_box_no_data {
		padding-top: calc((100vh - 500rpx)/2);
		font-size: 28rpx;
		text-align: center;
	}
	
	.tip_box_no_data .tip_title {
		width: 100%;
		text-align: center;
	}
	
	.no_data_img {
		width: 374rpx;
		height: 288rpx;
	}
</style>
